<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>彩贝热销</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			li{
				list-style: none;
			}
			#hot{
				width: 910px;
			}
			#hot .produucts>li{
				float: left;
				position: relative;
			}
			#hot .produucts .p{
				height: 200px;
				width: 300px;
				border: 1px solid gray;
			}
			#hot .produucts .first{
				height: 402px; 
			}
			#hot .produucts .header{
				height:200px; 
			}
			.clearfix:after{
				clear: both;
				content: '';
				display: block;
				height: 0;
			}
		</style>
	</head>
	<body>
		<div id="hot">
			<ul class="produucts clearfix">
				<li class="p first">
					<div class="header">
						<p>超级信用卡</p>
						<p>线上线下课累计彩贝积分</p>
					</div>
					<div>
						<img src="1.bmp"/>
					</div>
				</li>
				<li class="p">
					<div>
						<p>彩贝抢霸</p>
						<p>
							每天10点更新
						</p>
					</div>
					<div>
						<img src="2.bmp"/>
					</div>
				</li>
				<li class="p">
					<div>
						<p>热门优惠劵</p>
						<p>全场免费领取</p>
					</div>
					<div>
						<img src="3.bmp"/>
					</div>
				</li>
				<li class="p">
					<div>
						<p>促销活动</p>
						<p>汇集全网优惠</p>
					</div>
					<div>
						<img src="4.bmp"/>
					</div>
				</li>
				<li class="p">
					<div>
						<p>精挑细选</p>
						<p>给你最好的选择</p>
					</div>
					<div>
						<img src="5.bmp"/>
					</div>
				</li>
			</ul>
		</div>  
	</body>
</html>